<template>
  <div class="question-bank">
    <h1>题库</h1>
    <!-- 题型和科目选择栏 -->
    <div class="selection-bar">
      <el-select v-model="selectedQuestionType" placeholder="选择题型" @change="fetchQuestions">
        <el-option label="选择题" value="single_choice" />
        <el-option label="多选题" value="multiple_choice" />
        <el-option label="判断题" value="true_false" />
        <el-option label="简答题" value="short_answer" />
      </el-select>
      <el-select v-model="selectedSubject" placeholder="选择科目" @change="fetchQuestions">
        <el-option label="语文" value="chinese" />
        <el-option label="数学" value="math" />
        <el-option label="英语" value="english" />
      </el-select>
    </div>
    <!-- 分页组件 -->
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="totalQuestions"
      @current-change="handleCurrentChange"
    />
    <!-- 题目列表 -->
    <div v-for="question in currentQuestions" :key="question.id" class="question-item">
      <div class="question-info">
        <span>题目: {{ question.stem }}</span>
        <span>题目ID: {{ question.topicId }}</span>
        <span>分数: {{ question.fraction }}</span>
      </div>
      <!-- 选项 -->
      <div v-for="(option, index) in question.options" :key="index" class="option-item">
        <el-radio
          v-if="question.type !== 'short_answer'"
          v-model="question.userAnswers"
          :label="index + 1"
        >
          {{ option }}
        </el-radio>
        <el-input
          v-if="question.type === 'short_answer'"
          v-model="question.userAnswers"
          placeholder="请输入答案"
        />
      </div>
      <el-button type="primary" @click="saveAnswer(question)">保存答案</el-button>
    </div>
  </div>
</template>

<script>
import { Select, Option, Pagination, Radio, Button, Input } from 'element-ui'
import { practice_type } from '@/api/user' // 假设的API方法

export default {
  components: {
    'el-select': Select,
    'el-option': Option,
    'el-pagination': Pagination,
    'el-radio': Radio,
    'el-button': Button,
    'el-input': Input
  },
  data() {
    return {
      selectedQuestionType: '',
      selectedSubject: '',
      currentPage: 1,
      pageSize: 10,
      totalQuestions: 0,
      questionsList: []
    }
  },
  computed: {
    currentQuestions() {
      return this.questionsList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  watch: {
    selectedQuestionType(newVal) {
      if (newVal) this.fetchQuestions()
    },
    selectedSubject(newVal) {
      if (newVal) this.fetchQuestions()
    }
  },
  created() {
    this.fetchQuestions() // 初始加载时获取数据
  },
  methods: {
    async fetchQuestions() {
      if (!this.selectedQuestionType || !this.selectedSubject) return
      try {
        const response = await practice_type({
          type: this.selectedQuestionType,
          subject: this.selectedSubject,
          page: this.currentPage
        })
        console.log(response.data) // 打印响应数据
        if (response.data && response.data.questions) {
          this.questionsList = response.data.questions
          this.totalQuestions = response.data.total
        } else {
          console.error('Invalid response data:', response.data)
        }
      } catch (error) {
        console.error('Error fetching questions:', error)
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchQuestions()
    },
    saveAnswer(question) {
      // 保存答案逻辑
      console.log('Saved answer for question:', question)
      // 这里可以添加发送答案到后端的逻辑
    }
  }
}
</script>

<style scoped>
/* 你的样式 */
</style>
